@import '../../style/public.scss';

// 抽象通用样式
@mixin textEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 按钮交互效果
@mixin buttonInteraction {
    transition: $custom_transition;
    position: relative;
    
    &:hover {
        color: $color_main;
        transform: scale(1.1);
    }
    
    &:active {
        transform: scale(0.95);
    }
    
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background-color: rgba($color_main, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    }
    
    &:active::after {
        width: 35px;
        height: 35px;
        opacity: 1;
    }
}

// 点击动画
@keyframes buttonClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.92);
    }
    100% {
        transform: scale(1);
    }
}

.animate-click {
    animation: buttonClick 0.3s ease;
}

.MusicPlayer_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .MusicPlayer_display_container {
        flex: 1 1 auto;
        width: 100%;
        // 限制显示区域高度，留出足够空间给控制器
        max-height: calc(100% - 100px); // 100px是控制器的高度
        position: relative;
        overflow: hidden;
    }
    .MusicPlayer_controller_outer_container {
        width: 100%;
        // height: 100px;
        flex: 0 0 100px;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        // box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
        display: grid;
        grid-template-columns: 240px 1fr 100px;
        align-items: center;
        .MusicPlayer_info_container {
            display: grid;
            grid-template-columns: 100px 1fr;
            grid-template-rows: 50% 50%;
            gap: 5px 0;
            align-items: center;
            .MusicPlayer_info_cover_container {
                @include flexCenter;
                grid-column: 1/2;
                grid-row: 1/3;
                overflow: hidden;
                &>img {
                    width: 70%;
                    height: auto;
                    border-radius: $borderRadius;
                    user-select: none;
                    pointer-events: none;
                    -webkit-user-drag: none;
                }
            }
            .MusicPlayer_info_title_container {
                font-weight: 500;
                font-size: $fontSize;
            }
            .MusicPlayer_info_artist_container {
                font-size: $fontSize_small;
                color: #666;

            }
        }
        
        .MusicPlayer_controller_container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 $sidePadding;
    
            .MusicPlayer_controller_buttons {
                @include flexCenter;
                gap: 20px;
                margin-bottom: 10px;
    
                .MusicPlayer_control_button {
                    background: none;
                    border: none;
                    cursor: pointer;
                    @include flexCenter;
                    color: #333;
                    @include buttonInteraction;
    
                    &.play_button {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-color: $color_main;
                        color: white;
    
                        &:hover {
                            background-color: darken($color_main, 10%);
                            transform: scale(1.08);
                            box-shadow: 0 2px 8px rgba($color_main, 0.4);
                        }
                        
                        &:active {
                            transform: scale(0.95);
                            box-shadow: 0 1px 3px rgba($color_main, 0.3);
                        }
                        
                        &::after {
                            background-color: rgba(white, 0.2);
                        }
                    }
                }
    
                .MusicPlayer_volume_container {
                    position: relative;
                    @include flexCenter;
                    .MusicPlayer_volume_slider_container {
                        position: absolute;
                        bottom: 100%;
                        left: 50%;
                        transform: translateX(-50%) translateY(10px);
                        background-color: white;
                        border-radius: 12px;
                        padding: 8px 6px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                        z-index: 10;
                        opacity: 0;
                        visibility: hidden;
                        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
                        
                        &.show {
                            opacity: 1;
                            visibility: visible;
                            transform: translateX(-50%) translateY(0);
                        }
                        
                        &::after {
                            content: '';
                            position: absolute;
                            bottom: -4px;
                            left: 50%;
                            transform: translateX(-50%) rotate(45deg);
                            width: 8px;
                            height: 8px;
                            background-color: white;
                            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);
                        }
                        
                        .MusicPlayer_volume_slider {
                            -webkit-appearance: none;
                            width: 80px;
                            height: 3px;
                            border-radius: 2px;
                            outline: none;
                            background: linear-gradient(
                                to right, 
                                $color_main 0%, 
                                $color_main var(--volume-percentage), 
                                #e5e7eb var(--volume-percentage), 
                                #e5e7eb 100%
                            );
                            
                            &::-webkit-slider-thumb {
                                -webkit-appearance: none;
                                appearance: none;
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                background: white;
                                border: 1px solid $color_main;
                                cursor: pointer;
                                transition: all 0.15s ease;
                                
                                &:hover {
                                    transform: scale(1.2);
                                    box-shadow: 0 0 3px rgba($color_main, 0.4);
                                }
                            }
                            
                            &::-moz-range-thumb {
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                background: white;
                                border: 1px solid $color_main;
                                cursor: pointer;
                                transition: all 0.15s ease;
                                
                                &:hover {
                                    transform: scale(1.2);
                                    box-shadow: 0 0 3px rgba($color_main, 0.4);
                                }
                            }
                        }
                    }
                }
                .MusicPlayer_control_button_playerPerformance_select {
                    font-size: .8rem;
                }
                
            }
    
            .MusicPlayer_progress_container {
                display: flex;
                align-items: center;
                gap: 5px;
                padding: 8px 0;
                margin-top: -5px;
    
                .MusicPlayer_time_current, .MusicPlayer_time_total {
                    font-size: $fontSize_small;
                    color: #666;
                    width: 42px;
                    text-align: center;
                    font-variant-numeric: tabular-nums;
                    user-select: none;
                    font-weight: 500;
                }
    
                .MusicPlayer_progress_bar {
                    flex: 1;
                    height: 3px;
                    background-color: rgba(#e5e7eb, 0.8);
                    border-radius: 4px;
                    position: relative;
                    cursor: pointer;
                    transition: $custom_transition;
                    margin: 0 4px;
                    
                    &::before {
                        content: '';
                        position: absolute;
                        top: -8px;
                        left: -4px;
                        right: -4px;
                        bottom: -8px;
                        z-index: 0;
                    }
                    
                    &:hover, &.dragging {
                        height: 5px;
                    }
                    
                    // 已播放区域
                    .MusicPlayer_progress_completed {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: 100%;
                        background-color: $color_main;
                        border-radius: 4px;
                        transition: width 0.1s ease;
                        z-index: 2;
                        
                        // 拖动手柄
                        .MusicPlayer_progress_handle {
                            position: absolute;
                            right: -5px;
                            top: 50%;
                            transform: translate(0, -50%) scale(0);
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: white;
                            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
                            opacity: 0;
                            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                                        opacity 0.2s ease, 
                                        box-shadow 0.2s ease;
                            z-index: 3;
                        }
                    }
                    
                    &:hover {
                        .MusicPlayer_progress_completed {
                            .MusicPlayer_progress_handle {
                                transform: translate(0, -50%) scale(1);
                                opacity: 1;
                            }
                        }
                    }
                    
                    &.dragging {
                        .MusicPlayer_progress_completed {
                            background-color: darken($color_main, 5%);
                            
                            .MusicPlayer_progress_handle {
                                transform: translate(0, -50%) scale(1.2);
                                opacity: 1;
                                box-shadow: 0 0 6px rgba($color_main, 0.6);
                            }
                        }
                    }
                }
            }
        }
        
        .MusicPlayer_buttons_container {
            @include flexCenter;
            
            .MusicPlayer_playlist_button {
                cursor: pointer;
                padding: 8px;
                color: #666;
                @include buttonInteraction;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                @include flexCenter;
                
                &:hover {
                    background-color: rgba($color_main, 0.1);
                }
                
                &:active {
                    background-color: rgba($color_main, 0.2);
                }
            }
        }
    }
}
// 以下是需要添加到现有MusicPlayer.scss文件的播放列表样式代码
// 将这些代码添加到文件末尾

// 播放列表按钮样式增强
.MusicPlayer_playlist_button {
    &.active {
        color: $color_main !important;
        background-color: rgba($color_main, 0.1);
    }
}

// 播放列表面板
.MusicPlayer_playlist {
    position: fixed;
    right: -280px; // 初始位置在屏幕外
    top: 100px;
    width: 260px;
    height: calc(100vh - 200px);
    max-height: 500px;
    background: white;
    border-radius: $borderRadius;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    overflow: hidden;
    min-width: 250px;
    min-height: 300px;
    
    &.MusicPlayer_playlist_open {
        right: 20px;
    }
    
    // 播放列表标题栏
    .MusicPlayer_playlist_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        
        .MusicPlayer_playlist_title {
            margin: 0;
            font-size: $fontSize;
            font-weight: 500;
            color: #333;
            user-select: none;
            span {
                color: #666;
                font-size: $fontSize_small;
                font-weight: normal;
                margin-left: 5px;
            }
        }
        
        .MusicPlayer_playlist_close_btn {
            @include buttonInteraction;
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            padding: 4px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }
        }
    }
    
    // 列表项容器
    .MusicPlayer_playlist_items {
        flex: 1;
        overflow-y: auto;
        padding: 0;
        
        // 滚动条样式
        &::-webkit-scrollbar {
            width: 4px;
        }
        
        &::-webkit-scrollbar-track {
            background: #f5f5f5;
        }
        
        &::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb:hover {
            background: #d0d0d0;
        }
        
        // 列表为空时的提示
        .MusicPlayer_playlist_empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            padding: 20px;
            
            .MusicPlayer_playlist_empty_text {
                color: #999;
                margin-bottom: 15px;
            }
        }
        
        // 单个列表项
        .MusicPlayer_playlist_item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f9f9f9;
            transition: background-color 0.2s ease;
            
            &:hover {
                background-color: #f9f9f9;
            }
            
            &.MusicPlayer_playlist_item_playing {
                background-color: rgba($color_main, 0.05);
                
                .MusicPlayer_playlist_item_title {
                    color: $color_main;
                    font-weight: 500;
                }
            }
            
            // 专辑封面
            .MusicPlayer_playlist_item_cover {
                width: 40px;
                height: 40px;
                border-radius: $borderRadius;
                margin-right: 12px;
                background-color: #f0f0f0;
                overflow: hidden;
                @include flexCenter;
                flex-shrink: 0;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                
                svg {
                    color: #999;
                    font-size: 20px;
                }
            }
            
            // 歌曲信息
            .MusicPlayer_playlist_item_info {
                flex: 1;
                min-width: 0; // 解决子元素无法正常应用text-overflow的问题
                
                .MusicPlayer_playlist_item_title {
                    @include forbiddenSelect;
                    @include textEllipsis;
                    font-size: $fontSize_small;
                    color: #333;
                    margin-bottom: 4px;
                }
                
                .MusicPlayer_playlist_item_artist {
                    @include forbiddenSelect;
                    @include textEllipsis;
                    font-size: 12px;
                    color: #999;
                }
            }
            
            // 当前播放指示器
            .MusicPlayer_playlist_item_playing_indicator {
                @include forbiddenSelect;
                color: $color_main;
                margin-left: 10px;
                animation: playingPulse 1.5s infinite;
                font-size: $fontSize_small;
                
                @keyframes playingPulse {
                    0% { opacity: 0.5; }
                    50% { opacity: 1; }
                    100% { opacity: 0.5; }
                }
            }
            //  歌词关联按钮
            .MusicPlayer_playlist_item_lyrics_indicator {
                @include forbiddenSelect;
                $lyrics_link_btn_size: 24px;
                width: $lyrics_link_btn_size;
                height: $lyrics_link_btn_size;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 8px;
                cursor: pointer;
                opacity: 0.5;
                transition: all 0.2s ease;
                border-radius: 50%;
                flex-shrink: 0;
                
                &:hover {
                    background-color: rgba($color_main, 0.1);
                    opacity: 1;
                }
                
                svg {
                    color: #999;
                    transition: color 0.2s ease;
                    
                    &.has-lyrics {
                        color: $color_main;
                        opacity: 1;
                    }
                }
            }
            //  歌曲移除按钮
            .MusicPlayer_playlist_remove_btn {
                @include forbiddenSelect;
                $remove_btn_size: 24px;
                width: $remove_btn_size;
                height: $remove_btn_size;
                background: none;
                border: none;
                color: #ccc;
                font-size: 14px;
                cursor: pointer;
                opacity: 0;
                transition: all 0.2s ease;
                padding: 10px;
                border-radius: 50%;
                display: flex;
                flex: 0 0 auto;
                align-items: center;
                justify-content: center;
                margin-left: 5px;
                &:hover {
                    color: #ff4d4f;
                    background-color: rgba(#ff4d4f, 0.1);
                }
            }
            
            &:hover {
                .MusicPlayer_playlist_remove_btn {
                    opacity: 1;
                }
                .MusicPlayer_playlist_item_lyrics_indicator {
                    svg.has-lyrics {
                        opacity: 1;
                    }
                }
            }
        }
        
    }
    
    // 底部操作区
    .MusicPlayer_playlist_footer {
        padding: 12px;
        border-top: 1px solid #f0f0f0;
        text-align: center;
    }
    // 添加音乐按钮
    .MusicPlayer_playlist_add_btn {
        @include customButtonBasic;
    }
}
.MuiInput-root[class*="MusicPlayer_control_button_playerPerformance_select"][class*="MuiInputBase-root"] {
    &::before{
        border-bottom: none;
    }
    &::after{ 
        width: 0;
    }
    &:hover::before{
        border-bottom: none;
    }
    .MuiSelect-select {
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }
}



